<template>
	<view class="avatar-list-wrap">
		<view class="avatar-item box" v-for="(item,index) in list" :key="index">
			<image :src="item" class="full" mode="aspectFill"></image>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => [],
			},
		},
	}
</script>

<style lang="scss" scoped>
	.avatar-list-wrap {
		display: flex;
		flex-flow: row nowrap;

		.avatar-item {
			width: 32rpx;
			height: 32rpx;
			font-size: 0;
			border-radius: 50%;
			overflow: hidden;
			margin-left: -8rpx;

			&:first-child {
				margin-left: unset;
			}
		}

	}
</style>